<template>
  <!-- 删除任务进行二次输入名称确认 -->
  <a-modal
    centered
    width="416px"
    :open="show"
    :title="title"
    :mask-closable="false"
    :body-style="{ 'padding-bottom': '20px' }"
    :ok-button-props="{ disabled: isDisableDeleteButton, loading: loading }"
    :after-close="() => (inputValue = '')"
    ok-text="删除"
    @ok="emits('ok')"
    @cancel="cancel"
  >
    <div class="tips">
      <span class="icon"><i class="iconfont icon-error-warning-fill"></i></span>
      {{ msg }}
    </div>
    <div class="delConfirmation">
      {{ label }} <span class="modelName">（{{ confirmName }}）</span>
    </div>

    <a-input v-model:value="inputValue" v-trim :placeholder="label" />
  </a-modal>
</template>

<script lang="ts" setup>
  import { computed, ref } from 'vue'

  export interface Props {
    show?: boolean
    title?: string
    msg?: string
    label?: string
    confirmName?: string
    maxlength?: number
    loading?: boolean
  }

  const props = withDefaults(defineProps<Props>(), {
    show: false,
    title: '确认删除',
    msg: '任务删除后，不可恢复，请确认操作',
    label: '请输入任务名称',
    confirmName: '',
    maxlength: 200,
    loading: false
  })

  const emits = defineEmits(['ok', 'update:show'])

  const inputValue = ref('')
  const isDisableDeleteButton = computed<boolean>(() => props.confirmName !== inputValue.value)

  const cancel = () => {
    console.log('cancel')

    inputValue.value = ''
    emits('update:show', false)
  }
</script>

<style lang="less" scoped>
  // 删除弹窗
  .tips {
    display: flex;
    margin-bottom: 30px;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.75);
    line-height: 24px;

    .icon {
      margin-right: 10px;
      font-size: 24px;
      color: #f59700;

      i {
        font-size: 24px;
      }
    }
  }

  .delConfirmation {
    margin-bottom: 7px;
    font-size: 14px;
    line-height: 22px;
    color: rgba(25, 25, 48, 0.45);

    .modelName {
      white-space: pre-wrap;
      color: rgba(0, 0, 0, 0.75);
    }
  }

  :deep(.ant-modal-footer) {
    padding-top: 44px;
  }
</style>
